//TODO: Selectors
var todoInput = document.querySelector('.todo-input')
var todoButton = document.querySelector('.todo-button')
var todoList = document.querySelector('.todo-list')
var filterOption = document.querySelector('#filter-todo')

//TODO: Event listener
document.addEventListener('DOMContentLoaded', getTodos)
todoButton.addEventListener('click', addTodo)
todoList.addEventListener('click', actionCheck)
filterOption.addEventListener('click', filterTodo)

//TODO: Functions
function addTodo(event) {
    event.preventDefault()

    var todoDiv = document.createElement('div')
    todoDiv.classList.add('todo')

    var newTodo = document.createElement('li')
    newTodo.innerText = todoInput.value
    newTodo.classList.add('todo-item')
    todoDiv.appendChild(newTodo)

    //Add Todo to LocalStorage
    saveLocalTodos(todoInput.value)
    var completedButton = document.createElement('button')
    completedButton.innerHTML = '<i class="fas fa-check"></i>'
    completedButton.classList.add('complete-btn')
    todoDiv.appendChild(completedButton)

    var completedButton = document.createElement('button')
    completedButton.innerHTML = '<i class="fas fa-trash"></i>'
    completedButton.classList.add('trash-btn')
    todoDiv.appendChild(completedButton)

    todoList.appendChild(todoDiv)
    todoInput.value = ''
}

function actionCheck(event) {
    var todoItem = event.target.parentElement
    switch (event.target.classList[0]) {
        case 'trash-btn':
            removeLocalTodos(todoItem)
            todoItem.classList.add('fall')
            todoItem.addEventListener('transitionend', function () {
                todoItem.remove()
            })
            break
        case 'complete-btn':
            todoItem.classList.toggle('completed')
    }
}

function filterTodo(event) {
    //NOTE: 如何将HTMLCollection转化为Array类型？
    var todos = [].slice.call(todoList.children)
    console.log('todos: ', todos)
    todos.forEach(function (todo) {
        switch (event.target.value) {
            case 'all':
                todo.style.display = 'flex'
                break
            case 'completed':
                if (todo.classList.contains('completed')) {
                    todo.style.display = 'flex'
                } else {
                    todo.style.display = 'none'
                }
                break
            case 'uncompleted':
                if (todo.classList.contains('completed')) {
                    todo.style.display = 'none'
                } else {
                    todo.style.display = 'flex'
                }
                break
        }
    })
}

function saveLocalTodos(todo) {
    var todos
    if (localStorage.getItem('todos') === null) {
        todos = []
    } else {
        todos = JSON.parse(localStorage.getItem('todos'))
    }
    todos.push(todo)
    localStorage.setItem('todos', JSON.stringify(todos))
}

function getTodos() {
    var todos
    if (localStorage.getItem('todos') === null) {
        todos = []
    } else {
        todos = JSON.parse(localStorage.getItem('todos'))
    }
    todos.forEach(function (todo) {
        var todoDiv = document.createElement('div')
        todoDiv.classList.add('todo')

        var newTodo = document.createElement('li')
        newTodo.innerText = todo
        newTodo.classList.add('todo-item')
        todoDiv.appendChild(newTodo)

        var completedButton = document.createElement('button')
        completedButton.innerHTML = '<i class="fas fa-check"></i>'
        completedButton.classList.add('complete-btn')
        todoDiv.appendChild(completedButton)

        var completedButton = document.createElement('button')
        completedButton.innerHTML = '<i class="fas fa-trash"></i>'
        completedButton.classList.add('trash-btn')
        todoDiv.appendChild(completedButton)

        todoList.appendChild(todoDiv)
        todoInput.value = ''
    })
}

function removeLocalTodos(todo) {
    var todos
    if (localStorage.getItem('todos') === null) {
        todos = []
    } else {
        todos = JSON.parse(localStorage.getItem('todos'))
    }
    todos = todos.filter(item => item !== todo.innerText)
    localStorage.setItem('todos', JSON.stringify(todos))
}
